<?php

?>
<script type="text/javascript">
    $(document).ready(function(){
        // set auto move slider on hot product
        var bNext = true;
        var bPause = false;
        var autoSlider = setInterval(function(){
            if(bPause){
                return;
            }
            var left = $('.scroll_hot_panel').position().left;
            if(bNext){
                if((left + 470) % 600 != 0){
                    return;
                }
                var lastChild = $('.scroll_hot_panel .hot_product_item:last-child');
                if(lastChild.position().left + lastChild.width() + left - 600 < 860 - 130){
                    bNext = false;
                }
                else{
                    $('.scroll_hot_panel').css("left", (left - 600) + 'px');
                }
            }
            if(!bNext){
                if((left + 470) % 600 != 0){
                    return;
                }
                if( left + 600 > 130){
                    bNext = true;
                }
                else{
                    $('.scroll_hot_panel').css("left", (left + 600) + 'px');
                }
            }
            },2000);
            
        // Pre product in slider
        $('.pre_hot_product').click(function(){
            var left = $('.scroll_hot_panel').position().left;
            if((left + 470) % 600 != 0){
                return;
            }
            if( left + 600 > 130){
                return;
            }
            bNext = false;
            $('.scroll_hot_panel').css("left", (left + 600) + 'px');
        });
        
        // Next product in slider
        $('.next_hot_product').click(function(){
            var left = $('.scroll_hot_panel').position().left;
            if((left + 470) % 600 != 0){
                return;
            }
            var lastChild = $('.scroll_hot_panel .hot_product_item:last-child');
            if(lastChild.position().left + lastChild.width() + left - 600 < 860 - 130){
                return;
            }
            bNext = true;
            $('.scroll_hot_panel').css("left", (left - 600) + 'px');
        });
        
        // Pause move when mouse over product
        $('.hot_product_item').hover(function(){
            bPause = true;
        }).mouseleave(function(){
            bPause = false;
        });
    });
</script>
<div id="hot_panel">
    <div class="hot_panel_content">
        <div class="scroll_hot_panel">
            <?php if($template->get('aProducts')){
                foreach($template->get('aProducts') as $aProduct) {?>
                <div class="hot_product_item">
                    <div class="hot_product_content">
                        <img src="<?php echo URL::getLink('upload/'.(isset($aProduct['image']) ? $aProduct['image'] : $aProduct['defaultImage'])); ?>" alt="">
                    </div>
                    <?php if($template->get('showInfo')){ ?>
                    <div class="panel_info_hot_product">
                        <h3><?php echo $aProduct['name']; ?></h3>
                        <p>Dang boi <strong><?php echo $aProduct['userName']; ?></strong></p>
                        <p><?php echo $aProduct['description']; ?></p>
                    </div>
                    <?php }?>
                </div>
                <?php }} ?>
        </div>
    </div>
    <div class="left_panel_hot_product"></div>
    <div class="right_panel_hot_product"></div>
    <div class="pre_hot_product"></div>
    <div class="next_hot_product"></div>
</div>